<template>
  <div>
    <div id='showfrom' style='width:500px;height:500px;'></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
name: "eatch",
  data(){
    return{
      list:[],
      list1:[]
    }
  },
  methods:{
    catech(){
      var chartDom = document.getElementById('showfrom');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: this.list
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.list1,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    getlist(){
      this.myaxios('http://127.0.0.1:8000/eatch', 'get').then(res=>{
        console.log(res.data)
        this.list = res.data.list
        this.list1 = res.data.list1
        this.catech()
        // setInterval(this.getlist(), 100000)
        // clearInterval(gli)
      })
    }
  },
  mounted() {
    this.getlist()
  }
}
</script>

<style scoped>

</style>